<template>
    <div style="width: 100%;">
        <NCard class="card">
            <Profile></Profile>
            <br>
            <NSpace justify="center">
                <NButton type="error" @click="handleLogout">退出登录</NButton>
            </NSpace>
        </NCard>
    </div>
</template>

<script setup lang="ts">
import { NCard,NButton,NSpace } from "naive-ui";
import Profile from "@/components/Profile.vue";

import { loginStatus } from "@/stores/counter";
const login_status = loginStatus();


function handleLogout(){
    login_status.logout();
}

</script>


<style scoped>
@media (max-width: 599px) {
    .card {
        width: calc(599px - 200px);
        max-width: 100%;
        margin: auto;
    }
}

/* 当视口宽度大于或等于600px时 */
@media (min-width: 600px) {
    .card {
        width: calc(100% - 200px);
        margin-left: 100px;
        margin-right: 100px;
    }
}

.card {
    margin-top: 1rem;
}
</style>